<template>
	<view class="login-container">
		<view class="logo-box">
			<image class="logo" src="/static/logo1.jpg" mode="aspectFit"></image>
			<text class="title">生鲜优选</text>
		</view>

		<view class="form-box">
			<view class="input-group">
				<text class="iconfont icon-user"></text>
				<input type="text" v-model="form.userAccount" placeholder="请输入手机号/用户名" />
			</view>

			<view class="input-group">
				<text class="iconfont icon-lock"></text>
				<input type="password" v-model="form.userPassword" placeholder="请输入密码" />
			</view>

			<button class="login-btn" @tap="handleLogin">登录</button>

			<view class="options">
				<text @tap="goToRegister">注册账号</text>
				<!-- <text @tap="goToForget">忘记密码</text> -->
			</view>
		</view>
	</view>
</template>

<script>
	import {
		request
	} from '@/utils/request.js'
	export default {
		data() {
			return {
				form: {
					userAccount: '',
					userPassword: ''
				}
			}
		},
		methods: {
			async handleLogin() {
				if (!this.form.userAccount || !this.form.userPassword) {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					})
					return
				}
				const res = await request({
					url: 'user/login',
					data: this.form,
					method: 'POST'
				})
				if (res.code == 200) {
					// uni.setStorageSync('token', res.data.token)
					// uni.setStorageSync('userInfo', res.data.userInfo)
					uni.setStorageSync('jwt', res.data)
					console.log(res.data)
					//修改登录时间
					await request({
						url: 'user/updateLoginTime',
						data: {
							userAccount: res.data.userAccount
						},
						method: 'POST'
					})
					uni.showToast({
						title: '登录成功',
						icon: 'none'
					})

					uni.switchTab({
						url: '/pages/index/index'
					})
				} else if (res.code == 2100) {
					uni.showToast({
						title: '账号或密码错误',
						icon: 'none'
					})
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}



			},
			goToRegister() {
				uni.navigateTo({
					url: '/pages/register/register'
				})
			},



		}
	}
</script>

<style lang="scss">
	.login-container {
		min-height: 100vh;
		background: linear-gradient(to bottom, #ffffff, #f5f5f5);
		padding: 40rpx;

		.logo-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin: 60rpx 0;

			.logo {
				width: 160rpx;
				height: 160rpx;
				margin-bottom: 20rpx;
			}

			.title {
				font-size: 36rpx;
				color: #333;
				font-weight: bold;
			}
		}

		.form-box {
			background: #fff;
			border-radius: 20rpx;
			padding: 40rpx;
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

			.input-group {
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #eee;
				padding: 20rpx 0;
				margin-bottom: 30rpx;

				.iconfont {
					font-size: 40rpx;
					color: #666;
					margin-right: 20rpx;
				}

				input {
					flex: 1;
					font-size: 28rpx;
				}
			}

			.login-btn {
				background: #07c160;
				color: #fff;
				border-radius: 40rpx;
				margin: 40rpx 0;
				font-size: 32rpx;

				&:active {
					opacity: 0.8;
				}
			}

			.options {
				display: flex;
				justify-content: space-between;
				font-size: 26rpx;
				color: #666;

				text {
					padding: 10rpx;
				}
			}
		}
	}
</style>`